<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="70"
          class="search-form"
        >
          <Form-item label="关键字" prop="keyWord">
            <Input
              type="text"
              v-model="searchForm.keyWord"
              placeholder="请输入关键字"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="姓名" prop="createByName">
            <Input
              type="text"
              v-model="searchForm.createByName"
              placeholder="请输入姓名"
              :maxlength="10"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="发布时间" prop="dateRange">
            <DatePicker
              type="datetimerange"
              v-model="searchForm.dateRange"
              placeholder="请选择发布时间"
              format="yyyy-MM-dd HH:mm:ss"
              placement="bottom-end"
              style="width: 280px"
            ></DatePicker>
          </Form-item>
          <Form-item label="合规性" prop="isComplies">
            <Select
              v-model="searchForm.isComplies"
              placeholder="请选择合规性"
              clearable
              style="width: 200px"
            >
              <Option
                v-for="(item, index) in complianceList"
                :key="index"
                :value="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </Form-item>
          <Form-item label="审核状态" prop="status">
            <Select
              v-model="searchForm.status"
              placeholder="请选择审核状态"
              clearable
              style="width: 200px"
            >
              <Option
                v-for="(item, index) in statusList"
                :key="index"
                :value="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </Form-item>
          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
        </Form>
      </Row>
      <Row class="operation padding-row">
        <Button type="primary" @click="batchDel">删除</Button>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        sortable="custom"
        class="mt_10"
        :data="dataList"
        ref="table"
        @on-selection-change="changeSelect"
      ></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        />
      </Row>
    </Card>
    <Modal
      v-model="detailShow"
      :title="detailAction"
      :width="900"
      :footer-hide="detailAction == '详情'"
    >
      <div v-if="detailRow" class="modal-info">
        <p>审核信息</p>
        <div class="modal-row">
          <div>审核状态：</div>
          <div>
            {{
              detailRow.status == 1 || detailRow.status == 3
                ? "已通过"
                : detailRow.status == 4
                ? "不通过"
                : "待审核"
            }}
          </div>
        </div>
        <div class="modal-row">
          <div>合规性审核：</div>
          <div>
            <Tag v-if="detailRow.status == 1" color="blue">正常</Tag>
            <Tag v-else color="volcano">疑似违规</Tag>
          </div>
        </div>
        <div class="modal-row">
          <div>提交时间：</div>
          <div>{{ detailRow.createTime }}</div>
        </div>
        <div class="modal-row">
          <div>专家姓名：</div>
          <div>{{ detailRow.createByName }}</div>
        </div>
        <div class="modal-row">
          <div>动态标题：</div>
          <div>
            <div v-html="detailRow.titleTmp"></div>
          </div>
        </div>
        <div class="modal-row">
          <div>动态正文：</div>
          <div>
            <div v-html="detailRow.contentTmp"></div>
          </div>
        </div>
        <div v-if="detailRow.videoUrl" class="modal-row">
          <div></div>
          <div>
            <video :src="detailRow.source" controls controlslist="nodownload" :poster="detailRow.coverPath" />
          </div>
        </div>
        <div class="modal-row" v-if="detailRow.status == 4">
          <div>不通过理由：</div>
          <div>{{ detailRow.remarks || "无" }}</div>
        </div>
      </div>
      <div slot="footer">
        <Button type="success" @click="submitForm(true)">通过</Button>
        <Button type="primary" @click="submitForm(false)">拒绝</Button>
      </div>
    </Modal>
    <Modal v-model="refuseShow" title="审核拒绝">
      <div>
        <Input
          type="textarea"
          v-model="remarks"
          :autosize="{ minRows: 4, maxRows: 4 }"
          placeholder="请输入拒绝原因"
          :maxlength="100"
          show-word-limit
        />
      </div>
      <div slot="footer">
        <Button type="text" @click="refuseShow = false">关闭</Button>
        <Button type="primary" @click="approved(false)">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as API_Community from "@/api/community.js";
import { videoUrl } from "@/api/common.js";

export default {
  name: "dynamic-list",
  data() {
    return {
      loading: false, // 加载状态
      searchForm: {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        // keyWord: "", // 关键字
        createByName: "", // 姓名
        dateRange: "", //发布时间
        startDate: "", // 起始时间
        endDate: "", // 终止时间
        // isComplies: "", // 合规性
        status: "", // 审核状态
      },
      selectList: [], // 多选数据
      complianceList: [
        // 合规性列表
        { value: 1, label: "正常" },
        { value: 2, label: "疑似违规" },
      ],
      statusList: [
        // 审核状态列表
        { value: 2, label: "待审核" },
        { value: 3, label: "通过" },
        { value: 4, label: "不通过" },
      ],
      columns: [
        // 表头
        { type: "selection", width: 60, align: "center" },
        { title: "序号", minWidth: 100, type: "index" },
        {
          title: "动态标题",
          minWidth: 120,
          tooltip: true,
          render: (h, params) => {
            return h("div", { domProps: { innerHTML: params.row.titleTmp } }, []);
          },
        },
        {
          title: "话题正文",
          minWidth: 180,
          tooltip: true,
          render: (h, params) => {
            return h("div", { domProps: { innerHTML: params.row.contentTmp } }, []);
          },
        },
        {
          title: "合规性审核",
          minWidth: 100,
          render: (h, params) => {
            let v = params.row.status;
            return h(
              "Tag",
              {
                props: {
                  color: v == 1 ? "blue" : "volcano",
                },
              },
              v == 1 ? "正常" : "疑似违规"
            );
          },
        },
        {
          title: "审核状态",
          minWidth: 100,
          render: (h, params) => {
            let label = "待审核";
            if (params.row.status == 1 || params.row.status == 3) label = "通过";
            if (params.row.status == 4) label = "不通过";
            return h("span", {}, label);
          },
        },
        { title: "姓名", minWidth: 120, key: "createByName", align: "center" },
        { title: "发布时间", minWidth: 180, key: "createTime", tooltip: true },
        {
          title: "操作",
          align: "center",
          width: 200,
          fixed: "right",
          render: (h, params) => {
            let func = [];
            if (params.row.status == 2) {
              func.push(this.btnDom(h, "primary", "审核", "handleView", params));
            } else {
              func.push(this.btnDom(h, "primary", "详情", "handleView", params, true));
            }
            func.push(this.btnDom(h, "error", "删除", "handleDel", params));
            return h(
              "div",
              {
                style: { display: "flex", justifyContent: "center" },
              },
              func
            );
          },
        },
      ],
      dataList: [], // 表单数据
      total: 0, // 表单数据总数
      detailRow: {}, // 当前操作行
      detailShow: false, // 审核、详情弹窗
      detailAction: "", // 弹窗标题
      refuseShow: false, // 审核拒绝弹窗
      remarks: "", // 拒绝原因
    };
  },
  methods: {
    // 分页 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getData();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.searchForm.pageNumber = 1;
      this.getData();
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.getData();
    },
    // 多选
    changeSelect(e) {
      this.selectList = e;
    },
    // 按钮
    btnDom(h, type = null, label = "", method, params, ghost = false) {
      return h(
        "Button",
        {
          props: { type, size: "small", ghost },
          style: { marginRight: "5px" },
          on: {
            click: () => {
              this[method](params.row, label);
            },
          },
        },
        label
      );
    },
    // 批量删除
    batchDel() {
      if (this.selectList.length) {
        this.$Modal.confirm({
          title: "确认删除",
          content: "<p>您确认要删除所选的" + this.selectList.length + "条数据？</p>",
          onOk: () => {
            let ids = this.selectList
              .map((i) => {
                return i.id;
              })
              .join(",");
            API_Community.dynamicDel(ids).then((res) => {
              if (res.success) {
                this.$Message.success("删除成功");
                this.getData();
              }
            });
          },
        });
      } else {
        this.$Message.warning("请先勾选数据");
      }
    },
    // 删除
    handleDel(v) {
      this.$Modal.confirm({
        title: "确认删除",
        content: "<p>您确认要删除此动态吗？</p>",
        onOk: () => {
          API_Community.dynamicDel(v.id).then((res) => {
            if (res.success) {
              this.$Message.success("删除成功");
              this.getData();
            }
          });
        },
      });
    },
    // 详情
    handleView(v, label) {
      API_Community.dynamicDetail(v.id).then((res) => {
        if (res.success) {
          res.result.source = videoUrl(res.result.videoUrl);
          this.detailRow = res.result;
          this.detailAction = label;
          this.detailShow = true;
        }
      });
    },
    // 提交审核
    submitForm(v) {
      if (v) {
        // 通过
        this.approved(true);
      } else {
        // 拒绝
        this.detailShow = false;
        this.remarks = "";
        this.refuseShow = true;
      }
    },
    // 审核
    approved(isPass) {
      let params = {
        dynamicId: this.detailRow.id,
        remarks: isPass ? "" : this.remarks,
        isPass,
      };
      API_Community.dynamicExamine(params).then((res) => {
        if (res.success) {
          this.$Message.success(isPass ? "已通过" : "已拒绝");
          this.detailRow = {};
          this.detailShow = false;
          this.refuseShow = false;
          this.getData();
        }
      });
    },
    // 查询动态列表
    getData() {
      this.loading = true;
      let params = Object.assign({}, this.searchForm);
      let range = params.dateRange;
      if (range) params.startDate = new Date(range[0]).getTime() || "";
      if (range) params.endDate = new Date(range[1]).getTime() || "";
      delete params.dateRange;
      API_Community.dynamicList(params)
        .then((res) => {
          if (res.success) {
            res.result.records.forEach((i) => {
              i.source = videoUrl(i.videoUrl);
            });
            this.dataList = res.result.records;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.modal-info {
  p::before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 14px;
    vertical-align: top;
    border-radius: 2px;
    margin-right: 20px;
    background-color: #1989fa;
  }
  .modal-row {
    display: flex;
    line-height: 35px;
    padding: 0 20px;
    > div:first-child {
      width: 90px;
      text-align: right;
      padding-right: 5px;
      color: #777777;
    }
    > div:last-child {
      word-break: break-all;
      flex: 1;
    }
    .header-img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #c0c0c0;
    }
    video {
      max-width: 100%;
      height: 25rem;
    }
  }
  .modal-row2 {
    line-height: 35px;
    padding: 0 20px;
    > div:first-child {
      width: 160px;
      color: #777777;
    }
    > div:last-child {
      word-break: break-all;
    }
  }
  .divider {
    margin: 20px;
    border-bottom: 1px solid #e4e4e4;
  }
}
</style>
